/* general */
body,
:host(.mega-shadow-dom),
.custom-alpha {
    --mobile-border-radius-circle: 50%;
    --mobile-border-radius-extra-large: 24px;
    --mobile-border-radius-large: 16px;
    --mobile-border-radius-medium: 8px;
    --mobile-border-radius-small: 4px;
    --mobile-border-radius-extra-small: 2px;
}
/* light theme */
.theme-light,
.theme-light .custom-alpha,
html .theme-light-forced {
    --mobile-page-background: rgba(255, 255, 255, var(--mobile-page-alpha, 1));
    --mobile-background-inverse: rgba(42, 43, 44, var(--mobile-background-alpha, 1));
    --mobile-surface-1: rgba(247, 247, 247, var(--mobile-surface-alpha, 1));
    --mobile-surface-3: rgba(228, 228, 229, var(--mobile-surface-alpha, 1));
    --mobile-surface-2: rgba(239, 239, 240, var(--mobile-surface-alpha, 1));
    --mobile-background-blur: rgba(0, 0, 0, var(--mobile-background-alpha, 0.2));
    --mobile-surface-inverse-accent: rgba(57, 66, 78, var(--mobile-surface-alpha, 1));
    --mobile-button-primary: rgba(4, 16, 30, var(--mobile-button-alpha, 1));
    --mobile-button-primary-pressed: rgba(83, 91, 101, var(--mobile-button-alpha, 1));
    --mobile-button-brand: rgba(221, 20, 5, var(--mobile-button-alpha, 1));
    --mobile-button-brand-hover: rgba(182, 23, 20, var(--mobile-button-alpha, 1));
    --mobile-button-brand-pressed: rgba(147, 23, 21, var(--mobile-button-alpha, 1));
    --mobile-button-secondary-pressed: rgba(97, 99, 102, var(--mobile-button-alpha, 0.3));
    --mobile-button-outline: rgba(4, 16, 30, var(--mobile-button-alpha, 1));
    --mobile-button-outline-hover: rgba(57, 66, 78, var(--mobile-button-alpha, 1));
    --mobile-button-outline-background-hover: rgba(0, 0, 0, var(--mobile-button-alpha, 0.051));
    --mobile-button-outline-pressed: rgba(83, 91, 101, var(--mobile-button-alpha, 1));
    --mobile-button-error: rgba(227, 27, 87, var(--mobile-button-alpha, 1));
    --mobile-button-error-hover: rgba(192, 16, 74, var(--mobile-button-alpha, 1));
    --mobile-button-error-pressed: rgba(161, 16, 69, var(--mobile-button-alpha, 1));
    --mobile-button-disabled: rgba(0, 0, 0, var(--mobile-button-alpha, 0.102));
    --mobile-button-secondary: rgba(97, 99, 102, var(--mobile-button-alpha, 0.1));
    --mobile-button-primary-hover: rgba(57, 66, 78, var(--mobile-button-alpha, 1));
    --mobile-button-secondary-hover: rgba(97, 99, 102, var(--mobile-button-alpha, 0.2));
    --mobile-border-brand: rgba(221, 20, 5, var(--mobile-border-alpha, 1));
    --mobile-border-strong: rgba(82, 84, 87, var(--mobile-border-alpha, 0.2));
    --mobile-border-strong-selected: rgba(4, 16, 30, var(--mobile-border-alpha, 1));
    --mobile-border-subtle: rgba(82, 84, 87, var(--mobile-border-alpha, 0.05));
    --mobile-border-subtle-selected: rgba(4, 16, 30, var(--mobile-border-alpha, 1));
    --mobile-border-disabled: rgba(216, 217, 219, var(--mobile-border-alpha, 1));
    --mobile-text-primary: rgba(48, 50, 51, var(--mobile-text-alpha, 1));
    --mobile-text-secondary: rgba(97, 99, 102, var(--mobile-text-alpha, 1));
    --mobile-text-accent: rgba(4, 16, 30, var(--mobile-text-alpha, 1));
    --mobile-text-brand: rgba(221, 20, 5, var(--mobile-text-alpha, 1));
    --mobile-text-placeholder: rgba(97, 99, 102, var(--mobile-text-alpha, 1));
    --mobile-text-inverse: rgba(250, 250, 250, var(--mobile-text-alpha, 1));
    --mobile-text-inverse-accent: rgba(250, 250, 251, var(--mobile-text-alpha, 1));
    --mobile-text-inverse-secondary: rgba(176, 177, 179, var(--mobile-text-alpha, 1));
    --mobile-text-on-color: rgba(250, 250, 250, var(--mobile-text-alpha, 1));
    --mobile-text-on-color-disabled: rgba(169, 171, 173, var(--mobile-text-alpha, 1));
    --mobile-text-error: rgba(227, 27, 87, var(--mobile-text-alpha, 1));
    --mobile-text-success: rgba(0, 124, 62, var(--mobile-text-alpha, 1));
    --mobile-text-info: rgba(0, 120, 164, var(--mobile-text-alpha, 1));
    --mobile-text-warning: rgba(181, 84, 7, var(--mobile-text-alpha, 1));
    --mobile-text-disabled: rgba(193, 194, 196, var(--mobile-text-alpha, 1));
    --mobile-icon-primary: rgba(48, 50, 51, var(--mobile-icon-alpha, 1));
    --mobile-icon-secondary: rgba(97, 99, 102, var(--mobile-icon-alpha, 1));
    --mobile-icon-accent: rgba(4, 16, 30, var(--mobile-icon-alpha, 1));
    --mobile-icon-brand: rgba(221, 20, 5, var(--mobile-icon-alpha, 1));
    --mobile-icon-inverse: rgba(250, 250, 250, var(--mobile-icon-alpha, 1));
    --mobile-icon-inverse-accent: rgba(250, 250, 251, var(--mobile-icon-alpha, 1));
    --mobile-icon-inverse-secondary: rgba(176, 177, 179, var(--mobile-icon-alpha, 1));
    --mobile-icon-on-color: rgba(250, 250, 250, var(--mobile-icon-alpha, 1));
    --mobile-icon-on-color-disabled: rgba(169, 171, 173, var(--mobile-icon-alpha, 1));
    --mobile-icon-disabled: rgba(193, 194, 196, var(--mobile-icon-alpha, 1));
    --mobile-support-success: rgba(0, 155, 72, var(--mobile-support-alpha, 1));
    --mobile-support-warning: rgba(247, 163, 8, var(--mobile-support-alpha, 1));
    --mobile-support-error: rgba(227, 27, 87, var(--mobile-support-alpha, 1));
    --mobile-support-info: rgba(5, 186, 241, var(--mobile-support-alpha, 1));
    --mobile-selection-control: rgba(4, 16, 30, var(--mobile-selection-alpha, 1));
    --mobile-interactive: rgba(221, 20, 5, var(--mobile-interactive-alpha, 1));
    --mobile-toast-background: rgba(73, 74, 77, var(--mobile-toast-alpha, 1));
    --mobile-notification-success: rgba(207, 252, 219, var(--mobile-notification-alpha, 1));
    --mobile-notification-warning: rgba(254, 244, 198, var(--mobile-notification-alpha, 1));
    --mobile-notification-error: rgba(255, 228, 232, var(--mobile-notification-alpha, 1));
    --mobile-notification-info: rgba(223, 244, 254, var(--mobile-notification-alpha, 1));
    --mobile-indicator-pink: rgba(246, 61, 107, var(--mobile-indicator-alpha, 1));
    --mobile-indicator-yellow: rgba(247, 163, 8, var(--mobile-indicator-alpha, 1));
    --mobile-indicator-green: rgba(9, 191, 91, var(--mobile-indicator-alpha, 1));
    --mobile-indicator-blue: rgba(5, 186, 241, var(--mobile-indicator-alpha, 1));
    --mobile-indicator-indigo: rgba(71, 126, 247, var(--mobile-indicator-alpha, 1));
    --mobile-indicator-magenta: rgba(226, 72, 194, var(--mobile-indicator-alpha, 1));
    --mobile-indicator-orange: rgba(251, 101, 20, var(--mobile-indicator-alpha, 1));
    --mobile-link-primary: rgba(44, 91, 235, var(--mobile-link-alpha, 1));
    --mobile-link-inverse: rgba(105, 163, 251, var(--mobile-link-alpha, 1));
    --mobile-link-visited: rgba(35, 55, 131, var(--mobile-link-alpha, 1));
    --mobile-focus: rgba(189, 217, 255, var(--mobile-focus-alpha, 1));
    --mobile-brand-default: rgba(221, 20, 5, var(--mobile-brand-alpha, 1));
    --mobile-brand-hover: rgba(182, 23, 20, var(--mobile-brand-alpha, 1));
    --mobile-brand-pressed: rgba(147, 23, 21, var(--mobile-brand-alpha, 1));
    --mobile-brand-on-brand: rgba(247, 247, 247, var(--mobile-brand-alpha, 1));
    --mobile-brand-container-default: rgba(221, 20, 5, var(--mobile-brand-alpha, 0.1));
    --mobile-brand-container-hover: rgba(221, 20, 5, var(--mobile-brand-alpha, 0.2));
    --mobile-brand-container-pressed: rgba(221, 20, 5, var(--mobile-brand-alpha, 0.3));
    --mobile-brand-on-container: rgba(123, 33, 24, var(--mobile-brand-alpha, 1));
    --mobile-neutral-default: rgba(97, 99, 102, var(--mobile-neutral-alpha, 1));
    --mobile-neutral-hover: rgba(82, 84, 87, var(--mobile-neutral-alpha, 1));
    --mobile-neutral-pressed: rgba(68, 69, 71, var(--mobile-neutral-alpha, 1));
    --mobile-neutral-on-grey: rgba(247, 247, 247, var(--mobile-neutral-alpha, 1));
    --mobile-neutral-container-default: rgba(97, 99, 102, var(--mobile-neutral-alpha, 0.1));
    --mobile-neutral-container-hover: rgba(97, 99, 102, var(--mobile-neutral-alpha, 0.2));
    --mobile-neutral-container-pressed: rgba(97, 99, 102, var(--mobile-neutral-alpha, 0.3));
    --mobile-neutral-on-container: rgba(97, 99, 102, var(--mobile-neutral-alpha, 1));
}
/* dark theme */
.theme-dark,
.theme-dark .custom-alpha,
html .theme-dark-forced {
    --mobile-page-background: rgba(21, 22, 22, var(--mobile-page-alpha, 1));
    --mobile-background-inverse: rgba(239, 239, 240, var(--mobile-background-alpha, 1));
    --mobile-surface-1: rgba(34, 35, 36, var(--mobile-surface-alpha, 1));
    --mobile-surface-3: rgba(58, 59, 61, var(--mobile-surface-alpha, 1));
    --mobile-surface-2: rgba(42, 43, 44, var(--mobile-surface-alpha, 1));
    --mobile-background-blur: rgba(0, 0, 0, var(--mobile-background-alpha, 0.502));
    --mobile-surface-inverse-accent: rgba(189, 192, 196, var(--mobile-surface-alpha, 1));
    --mobile-button-primary: rgba(244, 244, 245, var(--mobile-button-alpha, 1));
    --mobile-button-primary-pressed: rgba(189, 192, 196, var(--mobile-button-alpha, 1));
    --mobile-button-brand: rgba(242, 52, 51, var(--mobile-button-alpha, 1));
    --mobile-button-brand-hover: rgba(251, 99, 97, var(--mobile-button-alpha, 1));
    --mobile-button-brand-pressed: rgba(253, 153, 151, var(--mobile-button-alpha, 1));
    --mobile-button-secondary-pressed: rgba(152, 154, 156, var(--mobile-button-alpha, 0.4));
    --mobile-button-outline: rgba(244, 244, 245, var(--mobile-button-alpha, 1));
    --mobile-button-outline-hover: rgba(163, 166, 173, var(--mobile-button-alpha, 1));
    --mobile-button-outline-background-hover: rgba(255, 255, 255, var(--mobile-button-alpha, 0.051));
    --mobile-button-outline-pressed: rgba(189, 192, 196, var(--mobile-button-alpha, 1));
    --mobile-button-error: rgba(246, 61, 107, var(--mobile-button-alpha, 1));
    --mobile-button-error-hover: rgba(253, 111, 144, var(--mobile-button-alpha, 1));
    --mobile-button-error-pressed: rgba(254, 163, 181, var(--mobile-button-alpha, 1));
    --mobile-button-disabled: rgba(255, 255, 255, var(--mobile-button-alpha, 0.102));
    --mobile-button-secondary: rgba(152, 154, 156, var(--mobile-button-alpha, 0.2));
    --mobile-button-primary-hover: rgba(163, 166, 173, var(--mobile-button-alpha, 1));
    --mobile-button-secondary-hover: rgba(152, 154, 156, var(--mobile-button-alpha, 0.3));
    --mobile-border-brand: rgba(242, 52, 51, var(--mobile-border-alpha, 1));
    --mobile-border-strong: rgba(176, 177, 179, var(--mobile-border-alpha, 0.4));
    --mobile-border-strong-selected: rgba(244, 244, 245, var(--mobile-border-alpha, 1));
    --mobile-border-subtle: rgba(176, 177, 179, var(--mobile-border-alpha, 0.1));
    --mobile-border-subtle-selected: rgba(244, 244, 245, var(--mobile-border-alpha, 1));
    --mobile-border-disabled: rgba(73, 74, 77, var(--mobile-border-alpha, 1));
    --mobile-text-primary: rgba(243, 244, 244, var(--mobile-text-alpha, 1));
    --mobile-text-secondary: rgba(169, 171, 173, var(--mobile-text-alpha, 1));
    --mobile-text-accent: rgba(250, 250, 251, var(--mobile-text-alpha, 1));
    --mobile-text-brand: rgba(242, 52, 51, var(--mobile-text-alpha, 1));
    --mobile-text-placeholder: rgba(193, 194, 196, var(--mobile-text-alpha, 1));
    --mobile-text-inverse: rgba(48, 50, 51, var(--mobile-text-alpha, 1));
    --mobile-text-inverse-accent: rgba(4, 16, 30, var(--mobile-text-alpha, 1));
    --mobile-text-inverse-secondary: rgba(97, 99, 102, var(--mobile-text-alpha, 1));
    --mobile-text-on-color: rgba(250, 250, 250, var(--mobile-text-alpha, 1));
    --mobile-text-on-color-disabled: rgba(145, 147, 151, var(--mobile-text-alpha, 1));
    --mobile-text-error: rgba(253, 111, 144, var(--mobile-text-alpha, 1));
    --mobile-text-success: rgba(9, 191, 91, var(--mobile-text-alpha, 1));
    --mobile-text-info: rgba(5, 186, 241, var(--mobile-text-alpha, 1));
    --mobile-text-warning: rgba(247, 163, 8, var(--mobile-text-alpha, 1));
    --mobile-text-disabled: rgba(121, 124, 128, var(--mobile-text-alpha, 1));
    --mobile-icon-primary: rgba(243, 244, 244, var(--mobile-icon-alpha, 1));
    --mobile-icon-secondary: rgba(169, 171, 173, var(--mobile-icon-alpha, 1));
    --mobile-icon-accent: rgba(250, 250, 251, var(--mobile-icon-alpha, 1));
    --mobile-icon-brand: rgba(242, 52, 51, var(--mobile-icon-alpha, 1));
    --mobile-icon-inverse: rgba(48, 50, 51, var(--mobile-icon-alpha, 1));
    --mobile-icon-inverse-accent: rgba(4, 16, 30, var(--mobile-icon-alpha, 1));
    --mobile-icon-inverse-secondary: rgba(97, 99, 102, var(--mobile-icon-alpha, 1));
    --mobile-icon-on-color: rgba(250, 250, 250, var(--mobile-icon-alpha, 1));
    --mobile-icon-on-color-disabled: rgba(145, 147, 151, var(--mobile-icon-alpha, 1));
    --mobile-icon-disabled: rgba(121, 124, 128, var(--mobile-icon-alpha, 1));
    --mobile-support-success: rgba(9, 191, 91, var(--mobile-support-alpha, 1));
    --mobile-support-warning: rgba(247, 163, 8, var(--mobile-support-alpha, 1));
    --mobile-support-error: rgba(253, 111, 144, var(--mobile-support-alpha, 1));
    --mobile-support-info: rgba(0, 150, 201, var(--mobile-support-alpha, 1));
    --mobile-selection-control: rgba(244, 244, 245, var(--mobile-selection-alpha, 1));
    --mobile-interactive: rgba(242, 52, 51, var(--mobile-interactive-alpha, 1));
    --mobile-toast-background: rgba(193, 194, 196, var(--mobile-toast-alpha, 1));
    --mobile-notification-success: rgba(1, 83, 43, var(--mobile-notification-alpha, 1));
    --mobile-notification-warning: rgba(148, 65, 11, var(--mobile-notification-alpha, 1));
    --mobile-notification-error: rgba(137, 18, 64, var(--mobile-notification-alpha, 1));
    --mobile-notification-info: rgba(8, 83, 113, var(--mobile-notification-alpha, 1));
    --mobile-indicator-pink: rgba(253, 111, 144, var(--mobile-indicator-alpha, 1));
    --mobile-indicator-yellow: rgba(253, 193, 33, var(--mobile-indicator-alpha, 1));
    --mobile-indicator-green: rgba(41, 221, 116, var(--mobile-indicator-alpha, 1));
    --mobile-indicator-blue: rgba(49, 208, 254, var(--mobile-indicator-alpha, 1));
    --mobile-indicator-indigo: rgba(105, 163, 251, var(--mobile-indicator-alpha, 1));
    --mobile-indicator-magenta: rgba(244, 168, 227, var(--mobile-indicator-alpha, 1));
    --mobile-indicator-orange: rgba(254, 178, 115, var(--mobile-indicator-alpha, 1));
    --mobile-link-primary: rgba(105, 163, 251, var(--mobile-link-alpha, 1));
    --mobile-link-inverse: rgba(44, 91, 235, var(--mobile-link-alpha, 1));
    --mobile-link-visited: rgba(217, 232, 255, var(--mobile-link-alpha, 1));
    --mobile-focus: rgba(38, 71, 208, var(--mobile-focus-alpha, 1));
    --mobile-brand-default: rgba(242, 52, 51, var(--mobile-brand-alpha, 1));
    --mobile-brand-hover: rgba(251, 99, 97, var(--mobile-brand-alpha, 1));
    --mobile-brand-pressed: rgba(253, 153, 151, var(--mobile-brand-alpha, 1));
    --mobile-brand-on-brand: rgba(247, 247, 247, var(--mobile-brand-alpha, 1));
    --mobile-brand-container-default: rgba(242, 52, 51, var(--mobile-brand-alpha, 0.3));
    --mobile-brand-container-hover: rgba(242, 52, 51, var(--mobile-brand-alpha, 0.4));
    --mobile-brand-container-pressed: rgba(242, 52, 51, var(--mobile-brand-alpha, 0.5));
    --mobile-brand-on-container: rgba(252, 239, 239, var(--mobile-brand-alpha, 1));
    --mobile-neutral-default: rgba(176, 177, 179, var(--mobile-neutral-alpha, 1));
    --mobile-neutral-hover: rgba(215, 216, 217, var(--mobile-neutral-alpha, 1));
    --mobile-neutral-pressed: rgba(239, 239, 240, var(--mobile-neutral-alpha, 1));
    --mobile-neutral-on-grey: rgba(34, 35, 36, var(--mobile-neutral-alpha, 1));
    --mobile-neutral-container-default: rgba(152, 154, 156, var(--mobile-neutral-alpha, 0.2));
    --mobile-neutral-container-hover: rgba(152, 154, 156, var(--mobile-neutral-alpha, 0.3));
    --mobile-neutral-container-pressed: rgba(152, 154, 156, var(--mobile-neutral-alpha, 0.4));
    --mobile-neutral-on-container: rgba(176, 177, 179, var(--mobile-neutral-alpha, 1));
}
